<template>
  <div>
    <el-dialog :visible.sync="visible" width="800px" top="2vh">
      <div slot="title">工作台资源绑定</div>
      <!-- <pre>{{ tempData }}</pre> -->
      <el-form inline v-model="parameter" ref="form">
        <div class="row">
          <el-form-item label="客户电话" prop="tel">
            <el-input
              size="small"
              placeholder="请输入"
              v-model="parameter.tel"
            ></el-input>
          </el-form-item>

          <el-form-item label="进线时间" prop="tel">
            <el-date-picker
              size="small"
              class="bg-grey"
              v-model="parameter.releaseTime"
              value-format="yyyy-M-dd H:m:s"
              :default-time="['0:0:0', '23:59:59']"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始"
              end-placeholder="结束"
            >
            </el-date-picker>
          </el-form-item>
        </div>
        <div class="row mb10">
          <el-button
            size="small"
            type="primary"
            @click="search()"
            :loading="loading"
          >
            <i class="fa fa-fw iconfont icon-search"></i>查询
          </el-button>
          <el-button
            size="small"
            type="warning"
            @click="reset()"
            :loading="loading"
          >
            <i class="fa fa-fw iconfont icon-reset"></i>重置
          </el-button>
          <el-button
            size="small"
            type="info"
            plain
            @click="refresh()"
            :loading="loading"
          >
            <i class="fa fa-fw iconfont icon-refresh"></i>刷新
          </el-button>
        </div>
      </el-form>
      <el-table
        ref="myTable"
        size="small"
        style="width: 100%"
        v-loading="loading"
        header-row-class-name="info-row"
        :row-class-name="tableRowClassName"
        highlight-current-row
        :data="tableList"
        :default-sort="{ prop: '是否绑定', order: 'descending' }"
      >
        <el-table-column label="客户电话">
          <template slot-scope="scope">
            {{ scope.row.客户电话 | tel8star() }}
          </template>
        </el-table-column>
        <el-table-column label="资源渠道">
          <template slot-scope="scope">
            <div class="text-overflow">
              {{ scope.row.资源渠道 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="进线时间">
          <template slot-scope="scope">
            {{ scope.row.进线时间 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="是否绑定">
          <!-- prettier-ignore -->
          <template slot-scope="scope">
      <template v-if="scope.row.id == _.get(tempData,'pn_Resources_Id',NaN)">
        <span class="text-green"><i class="el-icon-success"></i> 当前绑定</span>
      </template>
      <template v-else>
        <el-popconfirm
          icon="el-icon-warning"
          title="当前操作将修改并覆盖绑定关系！"
          confirm-button-text="修改并覆盖"
          confirm-button-type="danger"
          @confirm="BindingIt(scope.row)">
          <el-button slot="reference" type="text">绑定ta</el-button>
        </el-popconfirm>
      </template>
    </template>
        </el-table-column>
      </el-table>

      <div class="align-rm mt10">
        <el-pagination
          @size-change="handleSizeChange($event)"
          @current-change="handleCurrentChange($event)"
          :current-page="page.current"
          :page-sizes="page.sizes"
          :page-size="page.size"
          :layout="page.layout"
          :total="page.total"
        >
        </el-pagination>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancel()">关闭</el-button>
      </span>
    </el-dialog>
    <!-- prettier-ignore -->
  </div>
</template>

<script>
import { bus } from '@/main.js';
import queryTablePage from '@/mixin/queryTablePage.vue';
export default {
  name: 'theWorkbenchResourceBindin', //工作台资源绑定
  mixins: [queryTablePage],
  components: {},
  data() {
    return {
      isDev: process.env.NODE_ENV == 'development',
      parameter: {
        tel: '',
        releaseTime: [],
      },
      tempData: null,
      visible: false,
      tempUrl: '',
    };
  },
  computed: {
    getDate: function() {
      return {};
    },
    postData: function() {
      let params = Object.assign(
        {},
        this.$store.getters['userInfo/getEmployee'],
        {
          mobile: this._.get(this, 'parameter.tel', ''),
          name: '',
          fromSource_Id: '',
          incomingBeginTime: this._.get(this, 'parameter.releaseTime[0]', ''),
          incomingEndTime: this._.get(this, 'parameter.releaseTime[1]', ''),
        },
        {
          // draw: 0,
          start: this._.get(this.page, 'current', 1),
          length: this._.get(this.page, 'size'),
        },
      );
      return params;
    },
  },
  methods: {
    init: function(tempDate) {
      this.visible = true;
      this.tempData = tempDate;
      this.parameter.tel = this._.get(
        tempDate,
        'allPhoneNumber[0].phoneNumber',
        '',
      );
    },
    format: function(item) {
      return {
        id: this._.get(item, 'pN_Resources_Id'),
        客户电话: String(this._.get(item, 'phoneNumber')),
        资源渠道: this._.get(item, 'fromSources', '--'),
        是否绑定: this._.get(item, 'isBinding'),
        进线时间: this._.get(item, 'addTime'),
      };
    },
    ajaxData: function(isToPage1) {
      if (isToPage1) this.page.current = 1;

      this.loading = true;
      let postData = this.postData;
      if (this._.get(postData, 'mobile') == '') {
        this.loading = false;
        return;
      }
      this.$api.工作台资源绑定
        .获取所有表单信息({}, postData)
        .then(res => {
          if (res.code == 200) {
            this.page.total = res.data.count;
            this.clearTable();
            return Promise.resolve(res.data.list);
          }
        })
        .then(res => {
          let rows = res.map(row => {
            return this.format(row);
          });
          rows.forEach(row => {
            this.addTableRow(row, true);
          });
        })
        .catch(err => {})
        .finally(() => {
          this.loading = false;
        });
    },
    search() {
      this.ajaxData(true);
    },
    reset() {
      this.parameter = this.$options.data().parameter;
      this.ajaxData(true);
    },
    refresh() {
      this.ajaxData(false);
    },
    BindingItCallBack: function(row) {
      this.tableList.forEach(row => {
        row.是否绑定 = false;
      });
      row.是否绑定 = true;
      this.tableList.sort((a, b) => {
        return b.是否绑定 - a.是否绑定;
      });
    },
    BindingIt: function(row) {
      let getData = {
        scrmId: this._.get(this.tempData, 'id', ''),
        pnRessourceId: this._.get(row, 'id', ''),
      };
      this.loading = true;
      this.$api.工作台资源绑定
        .setBinding(getData, {})
        .then(res => {
          if (res.code == 200) {
            this.BindingItCallBack(row);
            this.$message.success('已绑定');
            bus.$emit('更新工作台资源绑定', {
              id: getData.scrmId,
              pn_Resources_Id: getData.pnRessourceId,
            });
          } else {
            return Promise.reject(res);
          }
        })
        .catch(err => {
          this.$message.error('绑定失败');
        })
        .finally(_ => {
          this.loading = false;
        });
    },
    cancel: function() {
      this.tempData = null;
      this.clearTable();
      this.visible = false;
    },
  },
  mounted: function() {
    bus.$on('工作台资源绑定', e => {
      console.log('工作台资源绑定');
      this.init(e.temp);

      this.$nextTick(() => {
        this.ajaxData();
      });
    });
  },
};
</script>

<style scoped lang="less"></style>
